<template>
  <div style="color: gray">
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div class="text item">
            <el-row>
              <el-col :span="2">
                <el-row>
                  <el-col :span="24">
                   <div
                      style="
                        width: 100px;
                        height: 100px;
                        border: 1px solid white;
                        background-color: cornflowerblue;
                        text-align: center;
                        position: fixed;
                      "
                    >
                      <span style="color: white; line-height: 100px"
                        >基本信息</span
                      >
                    </div>
                    <div
                      style="
                        width: 100px;
                        height: 100px;
                        border: 1px solid white;
                        background-color: cornflowerblue;
                        text-align: center;
                        margin-top: 100px;
                        position: fixed;
                      "
                    >
                      <span style="color: white; line-height: 100px"
                        >上传附件</span
                      >
                    </div>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="22">
                <el-row>
                  <el-col :span="24">
                    <br />
                    <span style="color: rgb(96, 89, 234)">基本信息</span>
                    <span style="color: gray"
                      >&nbsp;&nbsp;带<span style="color: red">*</span
                      >符号为必填项</span
                    >
                    <br />
                    <br />
                    <hr />
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form
                      :ref="formData"
                      :rules="rules"
                      :model="formData"
                      size="small"
                      label-width="100px"
                      label-position="left"
                    >
                      <el-col :span="24">
                        <el-form-item label="项目名称" prop="projectName">
                          <el-input
                            v-model="formData.projectName"
                            clearable
                            :style="{ width: '100%' }"
                          ></el-input>
                        </el-form-item>
                      </el-col>
                      <el-row>
                        <el-col :span="10">
                          <el-row>
                            <el-col :span="13">
                              <el-form-item label="申报人" prop="declarantName">
                                <el-autocomplete
                                  disabled="disabled"
                                  class="inline-input"
                                  v-model="formData.declarantName"
                                  placeholder=""
                                  :trigger-on-focus="false"
                                ></el-autocomplete>
                              </el-form-item>
                            </el-col>
                            <el-col :span="3">
                              <i class="el-icon-search"></i>
                            </el-col>
                          </el-row>
                        </el-col>
                        <el-col :span="4">&nbsp;</el-col>
                        <el-col :span="10">
                          <el-form-item
                            label="申报人工号/学号"
                            prop="declarantID"
                          >
                            <el-input
                              disabled="disabled"
                              v-model="formData.declarantID"
                              clearable
                              :style="{ width: '100%' }"
                            ></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="10">
                          <el-form-item
                            label="出生年月日"
                            prop="declarantBirthday"
                          >
                            <el-date-picker
                              v-model="formData.declarantBirthday"
                              format="YYYY年-MM月-DD日"
                              value-format="YYYY-MM-DD"
                              :style="{ width: '100%' }"
                              clearable
                            ></el-date-picker>
                          </el-form-item> </el-col
                        ><el-col :span="4">&nbsp;</el-col>
                        <el-col :span="10">
                          <el-form-item
                            label="申报人手机号"
                            prop="declarantTel"
                          >
                            <el-input
                              disabled="disabled"
                              v-model="formData.declarantTel"
                              clearable
                              :style="{ width: '100%' }"
                            ></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="10">
                          <el-form-item
                            label="申报人身份证号"
                            prop="declarantCard"
                          >
                            <el-input
                              v-model="formData.declarantCard"
                              clearable
                              :style="{ width: '100%' }"
                            ></el-input>
                          </el-form-item> </el-col
                        ><el-col :span="4">&nbsp;</el-col>
                        <el-col :span="10">
                          <el-form-item label="填报人" prop="userName">
                            <el-input
                              disabled="disabled"
                              v-model="formData.userName"
                              clearable
                              :style="{ width: '100%' }"
                            ></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="10">
                          <el-form-item
                            label="填报人联系方式"
                            prop="userFormat"
                          >
                            <el-input
                              v-model="formData.userFormat"
                              clearable
                              :style="{ width: '100%' }"
                            ></el-input>
                          </el-form-item> </el-col
                        ><el-col :span="4">&nbsp;</el-col>
                        <el-col :span="10">
                          <el-row>
                            <el-col :span="16">
                              <el-form-item
                                label="申报人所属部门"
                                prop="departmentID"
                              >
                                <el-cascader
                                  filterable
                                  class=".el_Select"
                                  style="width: 100%"
                                  v-model="formData.departmentID"
                                  :options="DepartList"
                                  @change="DepartBound"
                                  clearable
                                />
                              </el-form-item>
                            </el-col>
                            <el-col :span="3">
                              <i class="el-icon-search"></i>
                            </el-col>
                          </el-row>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="10">
                          <el-row>
                            <el-col :span="16">
                              <el-form-item
                                label="成果归属部门"
                                prop="achievementID"
                              >
                                <el-cascader
                                  filterable
                                  class=".el_Select"
                                  style="width: 100%"
                                  v-model="formData.achievementID"
                                  :options="DepartList"
                                  @change="DepartBound"
                                  clearable
                                />
                              </el-form-item>
                            </el-col>
                            <el-col :span="3">
                              <i class="el-icon-search"></i>
                            </el-col>
                          </el-row>
                        </el-col>
                        <el-col :span="4">&nbsp;</el-col>
                        <el-col :span="10">
                          <el-form-item label="学科门类" prop="disciplineID">
                            <el-select
                              v-model="formData.disciplineID"
                              clearable
                              :style="{ width: '60%' }"
                            >
                              <el-option
                                v-for="(item, index) in disciplineOptions"
                                :key="index"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled"
                              ></el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="10">
                          <el-row>
                            <el-col :span="13">
                              <el-form-item label="项目类型" prop="dic_Id">
                                <el-select
                                  clearable
                                  v-model="formData.dic_Id"
                                  @change="rankBound"
                                  placeholder="请选择"
                                  style="width: 100%"
                                >
                                  <el-option
                                    v-for="item in restaurants"
                                    :key="item"
                                    :label="item.dicValue"
                                    :value="item.id"
                                  >
                                  </el-option>
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col :span="3">
                              <i class="el-icon-search"></i>
                            </el-col>
                          </el-row> </el-col
                        ><el-col :span="4">&nbsp;</el-col>
                        <el-col :span="10">
                          <el-row>
                            <el-col :span="13">
                              <el-form-item label="项目级别" prop="levelID">
                                <el-select
                                  clearable
                                  v-model="formData.levelID"
                                  @change="sourceBound"
                                  placeholder="根据项目类型选择"
                                  style="width: 100%"
                                >
                                  <el-option
                                    v-for="item in restaurants1"
                                    :key="item"
                                    :label="item.dicValue"
                                    :value="item.id"
                                  >
                                  </el-option>
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col :span="3">
                              <i class="el-icon-search"></i>
                            </el-col>
                          </el-row>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="10">
                          <el-row>
                            <el-col :span="13">
                              <el-form-item
                                label="项目来源单位"
                                prop="sourceName"
                              >
                                <el-select
                                  clearable
                                  v-model="formData.sourceName"
                                  @change="categoryBound"
                                  placeholder="根据项目级别选择"
                                  style="width: 100%"
                                >
                                  <el-option
                                    v-for="item in restaurants2"
                                    :key="item"
                                    :label="item.dicValue"
                                    :value="item.id"
                                  >
                                  </el-option>
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col :span="3">
                              <i class="el-icon-search"></i>
                            </el-col>
                          </el-row> </el-col
                        ><el-col :span="4">&nbsp;</el-col>
                        <el-col :span="10">
                          <el-row>
                            <el-col :span="13">
                              <el-form-item label="项目类别" prop="categoryID">
                                <el-select
                                  clearable
                                  v-model="formData.categoryID"
                                  placeholder="根据项目来源单位选择"
                                  style="width: 100%"
                                >
                                  <el-option
                                    v-for="item in restaurants3"
                                    :key="item"
                                    :label="item.dicValue"
                                    :value="item.id"
                                  >
                                  </el-option>
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col :span="3">
                              <i class="el-icon-search"></i>
                            </el-col>
                          </el-row>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="10">
                          <el-form-item label="申报时间" prop="declarationTime">
                            <el-date-picker
                              v-model="formData.declarationTime"
                              format="YYYY年-MM月-DD日"
                              value-format="YYYY-MM-DD"
                              :style="{ width: '100%' }"
                              clearable
                            ></el-date-picker>
                          </el-form-item> </el-col
                        ><el-col :span="4">&nbsp;</el-col>
                        <el-col :span="10">
                          <el-form-item
                            label="申报经费(万元)"
                            prop="expenditureMoney"
                          >
                            <el-input
                              v-model="formData.expenditureMoney"
                              clearable
                              :style="{ width: '100%' }"
                            ></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="10">
                          <el-form-item label="项目开始时间" prop="beginTime">
                            <el-date-picker
                              v-model="formData.beginTime"
                              format="YYYY年-MM月-DD日"
                              value-format="YYYY-MM-DD"
                              :style="{ width: '100%' }"
                              clearable
                            ></el-date-picker>
                          </el-form-item> </el-col
                        ><el-col :span="4">&nbsp;</el-col>
                        <el-col :span="10">
                          <el-form-item label="项目结束时间" prop="endTime">
                            <el-date-picker
                              v-model="formData.endTime"
                              format="YYYY年-MM月-DD日"
                              value-format="YYYY-MM-DD"
                              :style="{ width: '100%' }"
                              clearable
                            ></el-date-picker>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-col :span="24">
                        <el-form-item label="项目摘要" prop="projectAbstract">
                          <el-input
                            v-model="formData.projectAbstract"
                            type="textarea"
                            :autosize="{ minRows: 4, maxRows: 4 }"
                            :style="{ width: '100%' }"
                          ></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item
                          label="是否涉及医学伦理"
                          prop="medicalEthics"
                        >
                          <el-radio-group
                            v-model="formData.medicalEthics"
                            size="small"
                          >
                            <el-radio
                              v-for="(item, index) in medicalEthicsOptions"
                              :key="index"
                              :label="item.value"
                              :disabled="item.disabled"
                              >{{ item.label }}</el-radio
                            >
                          </el-radio-group>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item
                          label="涉及医学伦理详情"
                          v-if="formData.medicalEthics"
                          prop="medicalDetails"
                        >
                          <el-input
                            v-model="formData.medicalDetails"
                            type="textarea"
                            :autosize="{ minRows: 4, maxRows: 4 }"
                            :style="{ width: '100%' }"
                          ></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item
                          label="是否涉及动物伦理"
                          prop="animalEthics"
                        >
                          <el-radio-group
                            v-model="formData.animalEthics"
                            size="small"
                          >
                            <el-radio
                              v-for="(item, index) in animalEthicsOptions"
                              :key="index"
                              :label="item.value"
                              :disabled="item.disabled"
                              >{{ item.label }}</el-radio
                            >
                          </el-radio-group>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item
                          label="涉及动物伦理详情"
                          prop="animalDetails"
                          v-if="formData.animalEthics"
                        >
                          <el-input
                            v-model="formData.animalDetails"
                            type="textarea"
                            :autosize="{ minRows: 4, maxRows: 4 }"
                            :style="{ width: '100%' }"
                          ></el-input>
                        </el-form-item>
                      </el-col>
                      <el-row>
                        <el-col :span="24">
                          <br />
                          <span style="color: rgb(96, 89, 234)">上传文件</span>
                          <br />
                          <br />
                          <hr />
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="24">
                          <el-form-item label="" prop="attachmentId" required>
                            <!-- <el-upload
                              ref="attachmentId"
                              :file-list="attachmentIdfileList"
                              action="https://jsonplaceholder.typicode.com/posts/"
                              :before-upload="attachmentIdBeforeUpload"
                            > -->
                            <!-- <el-button
                              size="small"
                              type="primary"
                              icon="el-icon-upload"
                              >选择文件</el-button
                            > -->
                            <!-- </el-upload> -->
                            <el-upload
                              class="upload-demo"
                              drag
                              action="http://localhost:9991/api/tb_project_appendix/UploadImgToQiNiu"
                              style="width: 90%"
                              multiple
                              :on-success="Upic"
                            >
                              <i class="el-icon-upload"></i>
                              <div class="el-upload__text">
                                将文件拖到此处，或<em>点击上传</em>
                              </div>
                              <div class="el-upload__tip">
                                只能上传jpg,jpeg,png,gif,doc,docx,pdf,xls,xlsx格式的文件，且文件不超过2MB
                              </div>
                            </el-upload>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="24">
                          <el-row>
                            <el-col :span="8"></el-col>
                            <el-col :span="8">
                              <el-form-item size="large">
                                <el-button
                                  type="primary"
                                  v-if="!addition"
                                  @click="submitForm"
                                  >提交</el-button
                                >
                                <el-button @click="resetForm">重置</el-button>
                              </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                          </el-row>
                        </el-col>
                      </el-row>
                    </el-form>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  defineComponent,
  ref,
  reactive,
  getCurrentInstance,
  inject,
  nextTick,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import http from "@/../src/api/http.js";

export default defineComponent({
  setup(props, context) {
    //定义常量接收ref赋值
    const addition = ref(false);
    //定义常量使用inject接收provide提供的变量值
    const reload = inject("reload");
    //在代码块内定义变量接收申报列表
    let getPageData = reactive({
      status: 0,
      msg: null,
      total: 0,
      rows: [{}],
      summary: null,
      extra: null,
    });
    //在代码块内定义变量接收新增申报项目
    let formData = reactive({
      projectName: undefined, //项目名称
      declarantName: JSON.parse(localStorage.getItem("user")).userName, //申报人
      declarantID: JSON.parse(localStorage.getItem("user")).userId, //申报人工号
      declarantBirthday: undefined, //申报人出生年月
      declarantTel: JSON.parse(localStorage.getItem("user")).userPhone, //申报人手机号
      declarantCard: undefined, //申报人身份证号
      userName: JSON.parse(localStorage.getItem("user")).userName, //填报人
      userFormat: undefined, //填报人联系方式
      departmentID: undefined, //申报人所属部门ID
      achievementID: undefined, //成果所属部门ID
      disciplineID: undefined, //学科门类ID
      dic_Id: undefined, //项目类型ID
      levelID: undefined, //项目级别ID
      sourceName: undefined, //项目来源单位
      categoryID: undefined, //项目类别ID
      declarationTime: undefined, //申报时间
      expenditureMoney: undefined, //申请经费
      beginTime: undefined, //项目开始时间
      endTime: undefined, //项目结束时间
      projectAbstract: undefined, //项目摘要
      medicalEthics: false, //是否涉及医学伦理
      isDelete: 0, //是否删除（默认未删除）
      animalEthics: false, //是否涉及动物伦理
      medicalDetails: "", //涉及医学伦理详情
      animalDetails: "", //涉及动物伦理详情
      data: {
        appendixUrl: undefined,
        appendixName: undefined,
      }, //项目附件
    });

    //使用ref语法糖创建响应式常量
    const DepartList = ref([]);
    //学科门类
    const disciplineOptions = ref([]);
    //医学伦理单选
    const medicalEthicsOptions = ref([
      {
        value: true,
        label: "是",
      },
      {
        value: false,
        label: "否",
      },
    ]);
    //动物伦理单选
    const animalEthicsOptions = ref([
      {
        value: true,
        label: "是",
      },
      {
        value: false,
        label: "否",
      },
    ]);
    //项目类型
    const restaurants = ref([]);
    //项目级别
    const restaurants1 = ref([]);
    //项目来源单位
    const restaurants2 = ref([]);
    //项目类别
    const restaurants3 = ref([]);
    //使用getCurrentInstance获取全局变量
    let appContext = getCurrentInstance().appContext;
    //定义变量接收main.js中定义的message
    let $message = appContext.config.globalProperties.$message;
    let router = useRouter();

    const checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("项目名称不能为空"));
      }
      let regNum = /[^\u4E00-\u9FA5]/g;
      if (regNum.test(value)) {
        callback(new Error("只能输入中文"));
      }
      http
        .post("/api/tb_project_apply_basicinfo/GetPageData", getPageData)
        .then((res) => {
          if (res.rows.length != 0) {
            res.rows.forEach((element) => {
              if (element.projectName == formData.projectName) {
                callback(new Error("已有此项目名称"));
              } else {
                callback();
              }
            });
          } else {
            callback();
          }
        });
    };

    const rules = reactive({
      projectName: [
        { required: true, validator: checkAge, trigger: "blur" },
        { max: 50, message: "项目名称最多50个字", trigger: "blur" },
      ],
      departmentID: [
        { required: true, message: "请选择申报人所属部门", trigger: "change" },
      ],
      achievementID: [
        { required: true, message: "请选择成果所属部门", trigger: "change" },
      ],
      disciplineID: [
        { required: true, message: "请选择学科门类", trigger: "change" },
      ],
      dic_Id: [
        { required: true, message: "请选择项目类型", trigger: "change" },
      ],
      levelID: [
        { required: true, message: "请选择项目级别", trigger: "change" },
      ],
      sourceName: [
        { required: true, message: "请选择项目来源单位", trigger: "change" },
      ],
      categoryID: [
        { required: true, message: "请选择项目类别", trigger: "change" },
      ],
      declarationTime: [
        { required: true, message: "请输入项目申报时间", trigger: "change" },
      ],
      beginTime: [
        { required: true, message: "请选择项目开始时间", trigger: "change" },
      ],
      endTime: [
        { required: true, message: "请选择项目结束时间", trigger: "change" },
      ],
    });

    //所属/归属部门绑定
    const DepartBound = () => {
      http.get("api/depart/DepartShow").then((res) => {
        //使用ref语法糖对定义的常量实现更改
        DepartList.value = res;
      });
    };

    //学科门类绑定
    const DiscipBound = () => {
      http
        .get("api/Sys_Dictionary/GetDictionaryDescList?Dic_ID=78")
        .then((res) => {
          disciplineOptions.value = res.result.data;
        });
    };

    //项目类型绑定
    const TypeBound = () => {
      http.get("api/tb_project_sourceinfo/GetSourceList").then((res) => {
        restaurants.value = res.data;
      });
    };
    //项目级别
    const rankBound = () => {
      formData.categoryID = undefined; //项目类别
      formData.sourceName = undefined; //项目来源单位
      formData.levelID = undefined; //项目级别
      http
        .get(
          "api/tb_project_sourceinfo/GetSourceList?dicCode=" + formData.dic_Id
        )
        .then((res) => {
          restaurants1.value = res.data;
        });
    };
    //项目来源单位
    const sourceBound = () => {
      formData.categoryID = undefined; //项目类别
      formData.sourceName = undefined; //项目来源单位
      http
        .get(
          "api/tb_project_sourceinfo/GetSourceList?dicCode=" + formData.levelID
        )
        .then((res) => {
          restaurants2.value = res.data;
        });
    };
    //项目类别
    const categoryBound = () => {
      formData.categoryID = undefined; //项目类别
      http
        .get(
          "api/tb_project_sourceinfo/GetSourceList?dicCode=" +
            formData.sourceName
        )
        .then((res) => {
          restaurants3.value = res.data;
        });
    };
    //上传文件
    const Upic = (val) => {
      formData.data.appendixUrl = val.filePath;
      formData.data.appendixName = val.fileName;
    };

    const submitForm = () => {
      //点击按钮判断addition是否为true，这里直接赋值为true，因为已有正则验证
      addition.value = true;
      formData.achievementID=JSON.stringify(formData.achievementID).toString();
      formData.departmentID=JSON.stringify(formData.departmentID).toString();
      http.post("api/tb_project_apply_basicinfo/AddBasicinfoorAppendix", formData).then((res) => {
        //判断返回状态码并弹出错误信息
        if (!res.status) {
          addition.value = false;
          return $message.error(res.message);
        }
        $message.success("项目申报已成功提交");
        //弹出成功信息之后跳转回home页面
        router.push({ path: "/BasicPage" });
      });
    };
    //重置页面，直接调用setup中定义的reload方法
    const resetForm = () => {
      reload();
    };

    DepartBound();
    DiscipBound();
    TypeBound();

    return {
      submitForm, //新增
      resetForm, //重置页面
      DepartBound, //所属/归属部门绑定
      DiscipBound, //学科门类绑定
      TypeBound, //项目类型绑定
      rankBound, //项目级别
      sourceBound, //项目来源单位
      categoryBound, //项目类别
      Upic, //上传文件
      getPageData, //接收申报列表
      addition, //按钮状态
      formData, //接收申报新增
      medicalEthicsOptions, //医学伦理单选
      animalEthicsOptions, //动物伦理单选
      DepartList, //部门
      rules, //正则
      disciplineOptions, //学科门类
      restaurants, //项目类型
      restaurants1, //项目级别
      restaurants2, //项目来源单位
      restaurants3, //项目类别
    };
  },
});
</script>

<style>
.el-upload__tip {
  line-height: 1.2;
}
.ll {
  background-color: rgb(96, 89, 234);
  margin-left: 20px;
  width: 100px;
  height: 100px;
  line-height: 100px;
  margin-top: 5px;
}
.el-input__wrapper {
  display: inline-flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 1px 11px;
  background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
  background-image: none;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  transition: var(--el-transition-box-shadow);
  box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color))
    inset;
  border-bottom: 1px solid;
}
.el-form-item.is-error .el-input__wrapper {
  box-shadow: 0 0 0 1px #ffffff inset;
}
.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px white inset;
}
.el-input {
  --el-input-text-color: var(--el-text-color-regular);
  --el-input-border: var(--el-border);
  --el-input-hover-border: var(--el-border-color-hover);
  --el-input-focus-border: var(--el-color-primary);
  --el-input-transparent-border: 0 0 0 1px transparent inset;
  --el-input-border-color: var(--el-border-color);
  --el-input-border-radius: var(--el-border-radius-base);
  --el-input-bg-color: var(--el-fill-color-blank);
  --el-input-icon-color: var(--el-text-color-placeholder);
  --el-input-placeholder-color: var(--el-text-color-placeholder);
  --el-input-hover-border-color: #ffffff;
  --el-input-clear-hover-color: var(--el-text-color-secondary);
  --el-input-focus-border-color: var(--el-color-primary);
}
.el-select {
  --el-select-border-color-hover: #ffffff;
  --el-select-disabled-border: var(--el-disabled-border-color);
  --el-select-font-size: var(--el-font-size-base);
  --el-select-close-hover-color: var(--el-text-color-secondary);
  --el-select-input-color: var(--el-text-color-placeholder);
  --el-select-multiple-input-color: var(--el-text-color-regular);
  --el-select-input-focus-border-color: #ffffff;
  --el-select-input-font-size: 14px;
}
</style>
